<template>
    <div class="box">
        <div class="tip">电商后台管理系统</div>
        <div class="loginBox">
            <div class="tip"></div>
            <el-form :model="loginInfo" class="login">
                <h2>用户登录</h2>
                <el-form-item label="账号: ">
                    <el-input v-model="loginInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="密码: ">
                    <el-input v-model="loginInfo.password" type="password"></el-input>
                </el-form-item>
                <el-button type="primary" class="btn" @click.prevent="login()">登录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      loginInfo: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async login () {
      const res = await this.$http.post('login', this.loginInfo)
      console.log(res)
      const { meta: { msg, status }, data } = res.data
      // 登录成功
      if (status === 200) {
        // alert('登录成功')
        this.$message.success('登录成功!')
        // 保存 token
        localStorage.setItem('token', data.token)
        // 跳转首页(home)
        this.$router.push({ path: '/home' })
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style>
.box{
    height: 100%;
    background: #324152;
}
.tip{
    padding-top: 80px;
    text-align: center;
    height: 100px;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
}
.loginBox {
  /* height: 100%; */
  justify-content: center;
  /* align-items: center; */
  background: #324152;
  display: flex;
}

.login {
  width: 400px;
  padding: 30px 40px;
  background: #fff;
  border-radius: 10px;
}
.login h2 {
  text-align: center;
  line-height: 1;
}
.btn {
  width: 100%;
}
</style>
